<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Icanvas example</title>
<script>
	window.onload = function(){//window.onload는 Body부분을 다 일고 난 후에 실행
		// var가 없으면 무조건 전역형
		var canvas = document.getElementById("mycanvas");
		var ctx = canvas.getContext("2d");
		ctx.strokeStyle='#ff0000';
		ctx.fillStyle='#0000ff';
		ctx.strokeRect(100,100,300,300);
		ctx.fillRect(200,200,100,100);
					//x,y,width,height
		var j=0;
		
		var color = new Array('#ff0000','#ec902c','#ecea2c','#2cec5e','#219dfd','#2621fd','#e021fd','#ff0000');
		
		for(i=10; i<500; i=i+60){//간격을 5 i는 70 130 180...으로 증가
			ctx.fillStyle=color[j];
			ctx.fillRect(i,450,55,55);//x,350,55,55
			j++;
		}
	}
</script>
</head>
<body>
	<canvas id='mycanvas' width = '600px' height ='500px'>
	</canvas> 
</body>
</html>